<script setup lang="ts">
//
import type { MovieItem } from '@/types/movieItem';
// 定义 props 接收
defineProps<{
    list: MovieItem[]
}>()



/** 携带电影的item参数跳转至详情页面
 * @param mid 电影id */
function goDetail(mid: String) {

    uni.navigateTo({
        url: '/pages/MovieDetails/MovieDetails?id=' + mid
    });
}


// 
function gohotMOvie(item: MovieItem) {
    uni.switchTab({
        url: '/pages/movie/movie'
    });
}



</script>

<template>
    <!-- 电影卡片 -->
    <view id="moveListContainer">
        <!-- 头部 -->
        <view class="moveListHeader">
            <text>热映</text>
            <!-- <uni-link showUnderLine="false" text="更多 >" /> -->
            <text @tap="gohotMOvie" style="color: #333;">更多 ></text>
        </view>
        <!-- 尾部 -->
        <view claas="moveListFooter">
            <scroll-view class="scroll-view_H" scroll-x="true" scroll="scroll-y" scroll-left="120">


                <view class="scroll-view-item_H" v-for="item in list" :key="item.id">
                    <view class="imgList">
                        <image :src="item.imgUrl" mode="scaleToFill" />
                        <text class="markstar">{{ item.star }}分</text>
                    </view>
                    <text class="movieName">{{ item.name }}</text>
                    <button class="button-yuanjiao" @tap="goDetail(item.id)" hover-class="bg-click">购票</button>
                </view>



            </scroll-view>
        </view>
    </view>

</template>

<style lang="scss">
.moveListHeader {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;


}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;
}


.scroll-view-item_H {

    margin: 10px;
    border: 1px red solid;
    display: inline-block;
    width: 200rpx;
    height: 450rpx;
    text-align: center;
    font-size: 36rpx;
    // background-color: red;
    vertical-align: top;

    .imgList {
        position: relative;



    }

    .movieName {
        font-size: 14px;
    }

    .markstar {
        position: absolute;
        bottom: 10rpx;
        left: 21rpx;
        color: orangered;
        font-size: 27rpx;
    }

    image {
        height: 300rpx;
        width: 200rpx;
    }


    // 按钮改圆角

    .button-yuanjiao {
        color: white;
        width: 100rpx;
        height: 50rpx;
        display: flex;
        margin-top: 30rpx;
        line-height: 50rpx;
        justify-content: center;
        border-radius: 25px;
        /* 这里可以改成渐变： background:linear-gradient(to right, #FFDE28,#FF3228) */
        background-color: orangered;
        font-size: 28rpx;
    }

    .bg-click {
        background-color: #a7a9ff;
    }


}
</style>
